{extend name="public:common_index"/}
{block name="main"}
<div class="navbar navbar-default">
    <form action="" id="search-form2" class="navbar-form form-inline" method="get" onsubmit="return false">
        <div class="form-group">

            <label class="control-label" for="input-order-id">状态</label>
            <select class="form-control" name="status">
                <option id="status2" value="">全部</option>
                <option id="status1" value="1">充值</option>
                <option id="status0" value="5">提现</option>

            </select>
            <!--<label class="control-label" for="input-order-id">类型</label>-->
            <!--{:arr2select('cid',$data,'全部',input('cid'),'cid','cate_name')}-->
        </div>
        <div class="form-group">
            <label class="control-label" for="input-order-id">时间筛选</label>
            <div class="input-group">
                <input type="text" name="startDate"  autocomplete="off" value="{$Think.get.startDate}" placeholder="选择开始时间"
                       class="form-control timepicker">
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <input type="text" name="endDate"  autocomplete="off" value="{$Think.get.endDate}" placeholder="选择结束时间"
                       class="form-control timepicker">
            </div>
        </div>
        <button type="submit" onclick="javascript:document.getElementById('search-form2').submit();"
                id="button-filter search-order" class="btn btn-primary"><i class="fa fa-search"></i> 筛选
        </button>

    </form>
</div>
<div class="col-sm-6">
    <div id="box" style="height:400px;width: 800px;padding: 20px"></div>
</div>
{/block}

{block name="js"}
<script src="__PUBLIC__/js/echarts-all.js"></script>
<script>
    // 获取到这个DOM节点，然后初始化
    var myChart = echarts.init(document.getElementById("box"));
    var option = {
        // 标题
        title: {
            text: '充值提现折线图',
            subtext: '数据来源：soho直播平台'
        },
        tooltip: {
            trigger: 'axis'
        },
        //图例名
        legend: {
            data:['充值','提现']
        },
        grid: {
            left: '10%',   //图表距边框的距离
            right: '10%',
            bottom: '5%',
            containLabel: true
        },
        //工具框，可以选择
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        //x轴信息样式
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: {$days},
            //坐标轴颜色
            axisLine:{
                lineStyle:{
                    color:''
                }
            },
            //x轴文字旋转
            axisLabel:{
                rotate:30,
                interval:0
            },
        },

        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} '
                }
            }
        ],




        series: [
            {if condition="$status ==1"}

            {
                name:'充值金额',
                type:'line',
                symbolSize:4,   //拐点圆的大小
                color:['red'],  //折线条的颜色
                data:{$recharge},

                smooth:false,   //关键点，为true是不支持虚线的，实线就用true
                itemStyle:{
                    normal:{
                        lineStyle:{
                            width:2,
                            type:'dotted'  //'dotted'虚线 'solid'实线
                        }
                    }
                }
            },
            {elseif condition="$status ==5"/}
            {
                name:'提现金额',
                type:'line',
                symbol:'circle',
                symbolSize:4,
                itemStyle:{
                    normal:{
                        color:'red',
                        borderColor:'red'  //拐点边框颜色
                    }
                },
                data:{$cash}
            },

            {else /}
    {
        name:'提现金额',
            type:'line',
        symbolSize:4,   //拐点圆的大小
        color:['red'],  //折线条的颜色
        data:{$cash},

        smooth:false,   //关键点，为true是不支持虚线的，实线就用true
            itemStyle:{
        normal:{
            lineStyle:{
                width:2,
                    type:'dotted'  //'dotted'虚线 'solid'实线
            }
        }
    }
    },
    //实线
    {
        name:'充值金额',
            type:'line',
        symbol:'circle',
        symbolSize:4,
        itemStyle:{
        normal:{
            color:'blue',
                borderColor:'blue'  //拐点边框颜色
        }
    },
        data:{$recharge}
    },


    {/if}


        ]

    };

    myChart.setOption(option);
</script>



{/block}



